<template>
    <a-drawer :title="formData.id ? '编辑' : '新增'" :width="600" :visible="visible" :destroy-on-close="true"
        :footer-style="{ textAlign: 'right' }" @close="onClose">
        <a-form ref="formRef" :model="formData">
            
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="提示内容" name="subject" :rules="required('请输入提示内容')">
                        <a-textarea v-model:value="formData.subject" placeholder="请输入提示内容" />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="详情" name="content" :rules="required('请输入详情')">
                        <hp-editor v-model="formData.content" :toolbar="toolbar" placeholder="请输入详情"></hp-editor>
                    </a-form-item>
                </a-col>

            </a-row>
            
            <a-row>
                <a-col :span="24">
                    <a-form-item label="提示省分" name="area" :rules="required('请选择省分')">
                        <a-select v-model:value="formData.area" multiple style="width: 100%" mode="multiple" :options="areas"
                            placeholder="请选择省分" :field-names="{ label: 'dictLabel', value: 'dictValue', options: 'areas' }" allowClear>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="onSubmit('0')" :loading="submitLoading">保存</a-button>
            <a-button type="primary" @click="onSubmit('1')" :loading="submitLoading">提交</a-button>
        </template>
    </a-drawer>
</template>

<script setup name="loginNoticeForm">
import { cloneDeep } from 'lodash-es'
import tool from '@/utils/tool'
import HpEditor from "@/components/Editor/index.vue";
import { required } from '@/utils/formRules'
import loginNoticeApi from '@/api/biz/loginNoticeApi'
const toolbar = ref('undo redo | forecolor bold italic underline | formatselect fontselect fontsizeselect | \
				alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \
				image preview')
// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
// 获取省分字典
const areas = tool.dictTypeList('area_type')

// 打开抽屉
const onOpen = (record) => {
    visible.value = true
    if (record) {
        let recordData = cloneDeep(record)
        recordData.area = recordData.area.split(',')
        formData.value = Object.assign({}, recordData)
    }
}
// 关闭抽屉
const onClose = () => {
    formRef.value.resetFields()
    formData.value = {}
    visible.value = false
}
// 保存省分汉字extJson
const setExtJson = (area) =>{
    let arr = []
    areas.map(item =>{
        if (area.includes(item.dictValue)) {
            arr.push(item.dictLabel)
        }
    })
    return arr.join()
}

// 验证并提交数据
const onSubmit = (status) => {
    formRef.value
        .validate()
        .then(() => {
            submitLoading.value = true
            const formDataParam = cloneDeep(formData.value)
            const { area } = formDataParam
            formDataParam.area = area.join()
            formDataParam.extJson = setExtJson(area)
            formDataParam.status = status
            loginNoticeApi.loginNoticeSubmitForm(formDataParam, !formDataParam.id)
                .then(() => {
                    onClose()
                    emit('successful')
                })
                .finally(() => {
                    submitLoading.value = false
                })
        })
}
// 抛出函数
defineExpose({
    onOpen
})
</script>
